
angular.module('zixys.corners',[])

    .factory('newCorners',[function(){
        return function(){
            return {
                topLeft : 0,
                topRight :0,
                bottomRight : 0,
                bottomLeft : 0
            };
        }
    }])

    .service('cornersList',[function(){

        this.corners = {};
        this.zxNode = null;

        this.$_deploy = function() {
            if(!this.zxNode) return;
            this.zxNode.setData('corners',this.corners);
        }

        this.$_reset = function(){
            this.corners = {};
        }

    }])

    .directive('cornersTab',function(){
        return {
            restrict: 'C',
            replace: false,
            template:							
                    '<div id="zixys-background-tab" >'+
                        '<div class="zixys-menu-block">'+
                            '<div class="zixys-input-box"><span class="zixys-menu-label">Top-Left</span><input class="zixys-spinner" min="0" ng-model="cornersList.corners.topLeft" ng-disabled="noElement" type="text"></div>'+
                            '<div class="zixys-input-box"><span class="zixys-menu-label">Bottom-Left</span><input class="zixys-spinner" min="0" ng-model="cornersList.corners.bottomLeft" ng-disabled="noElement" type="text" ></div>'+
                        '</div>'+
                        '<div class="zixys-menu-block">'+
                            '<div class="zixys-input-box"><span class="zixys-menu-label">Top-right</span><input class="zixys-spinner" min="0" ng-model="cornersList.corners.topRight" ng-disabled="noElement" type="text"></div>'+
                            '<div class="zixys-input-box"><span class="zixys-menu-label">Bottom-right</span><input class="zixys-spinner" min="0" ng-model="cornersList.corners.bottomRight" ng-disabled="noElement" type="text" ></div>'+
                        '</div>'+
                        '<div class="zixys-template-action">'+
                            '<input type="button" value="Revert" />'+
                        '</div>'+
                    '</div>',

            controller : ['$scope', 'cornersList', 'zxNodes', 'registerCompiler', '$interpolate', function($scope, cornersList, zxNodes) {
                $scope.cornersList = cornersList;
                $scope.noElement = true;
                $scope.zxNodes = zxNodes;

                function draw() {
                    cornersList.$_deploy();
                }

                $scope.$watch('zxNodes.selected',function(zixysNode){
                    if (zixysNode) {
                        $scope.noElement = false;
                        cornersList.zxNode = zixysNode;

                        if (zixysNode.data && zixysNode.data.corners) {
                            cornersList.corners = zixysNode.data.corners;
                        } else {
                            cornersList.$_reset();
                        }
                    }else{
                        $scope.noElement = true;
                        cornersList.zxNode = null;
                    }
                });

                $scope.$watch('cornersList.corners',function (newVal, oldVal) {
                    if (newVal===oldVal) return;
                    draw();
                },true);

            }]
        }
    })

    .run(['$rootScope', 'registerCompiler', '$interpolate', function($rootScope, registerCompiler, $interpolate) {

        registerCompiler({
            name:'corners',
            export : 'variant',
            //property : 'border-radius',
            property : 'background-image',
            compile : function(data) {
                var codeline = $interpolate( '{{topLeft || 0}}px {{topRight || 0}}px {{bottomRight || 0}}px {{bottomLeft || 0}}px' )(data);
                return  [
                    '-moz-border-radius: '+codeline, /* Firefox */
                    '-webkit-border-radius: '+codeline, /* Safari, Chrome */
                    'border-radius: '+codeline /* CSS3 */
                ]
            }
        });

        $rootScope.$on('zixysDomReady',function(event,params){
            $rootScope.addTab('Corners','corners-tab');
        });
        
    }]);
    
    